<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>{{title}}</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
    <script src="https://unpkg.com/topojson-client@3"></script>
    <script src="http://code.highcharts.com/stock/highstock.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://code.highcharts.com/maps/modules/map.js" type="text/javascript" charset="utf-8"></script>
    
    <script src="https://code.highcharts.com/mapdata/index.js?1"></script>
    <script src="https://code.highcharts.com/modules/tilemap.js"></script>
    <script src="https://code.highcharts.com/maps/modules/pattern-fill.js"></script>
    <!-- <script src="https://code.highcharts.com/maps/modules/data.js"></script> -->
    <script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.18.2/codemirror.min.js'></script>
    <link href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.18.2/codemirror.min.css' type="text/css" rel="stylesheet"></link>
    <link href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.18.2/theme/neo.min.css' type="text/css" rel="stylesheet"></link>
    <link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/stocktools/gui.css">
    <script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.18.2/mode/javascript/javascript.min.js'></script> 
   
    <script src="https://code.highcharts.com/highcharts-more.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://code.highcharts.com/highcharts-3d.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://code.highcharts.com/modules/data.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/funnel.js"></script>
    <script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
    <script src="https://code.highcharts.com/modules/series-label.js"></script>
    <script src="https://code.highcharts.com/modules/annotations.js"></script>
    <script src="https://code.highcharts.com/modules/annotations-advanced.js"></script>
    <script src="https://code.highcharts.com/modules/stock-tools.js"></script>

    <script src="https://code.highcharts.com/modules/accessibility.js"></script>

    {{#each scripts}}
    <script src="{{{this}}}" type="text/javascript"></script>
    {{/each}}
    {{#if static}}
    <link href="highcharts-editor.min.css" type="text/css" rel="stylesheet"/>

    {{else}}
    <link href="/css/theme.default.css" type="text/css" rel="stylesheet"/>
    <script src="./plugins/data-csv.js" type="text/javascript"></script>
    <script src="./plugins/data-difi.js" type="text/javascript"></script>
    <script src="./plugins/data-gspreadsheets.js" type="text/javascript"></script>
    <script src="./plugins/data-socrata.js" type="text/javascript"></script>
    <script src="./plugins/export-beautified-json.js" type="text/javascript"></script>
    <script src="./plugins/export-beautified.js" type="text/javascript"></script>
    <script src="./plugins/json-import.js" type="text/javascript"></script>
    {{/if}}

    {{#if static}}
    {{#if analyticsToken}}
    <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)   })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');    ga('create', '{{{analyticsToken}}}', 'auto'); 
    ga('set', 'forceSSL', true);
    ga('set', 'displayFeaturesTask', null);
    ga('set', 'anonymizeIp', true);
    ga('send', 'pageview');
    </script>
    
    {{/if}}
    {{/if}}
    <style>
        html, body {
            margin: 0;
            padding: 0;
            width:100%;
            height:100%;
            background:#F5F5F5;
            font-family: 'Roboto', sans-serif;
        }

        .highed-index-box {
            height:100%;
            position: relative;
            left:50%;
            width:80%;
            max-width: 600px;
            padding:20px;
            transform:translate(-50%, 0);
            background: #FFF;

            box-sizing:border-box !important;
            -moz-box-sizing:border-box !important;
            -webkit-box-sizing:border-box !important;
        }

        .highed-index-group {
            text-decoration: none;
            padding:20px;
            border-radius:10px;
            background:#01579b;
            color:#fff;
            font-size: 24px;
            width:100%;
            min-height:30px;
            margin-bottom: 10px;

            text-align: center;
            display: block;


            box-sizing:border-box !important;
            -moz-box-sizing:border-box !important;
            -webkit-box-sizing:border-box !important;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            cursor:pointer !important;
            transition:0.2s ease all; 
            -moz-transition:0.2s ease all; 
            -webkit-transition:0.2s ease all;
        }

        .highed-index-group:hover {
            background:#0288d1;
        }

        .highed-index-headline {
            padding-left:10px;
            font-weight: 100;
            text-align: center;
        }

        .highed-index-footer {
            margin-top:50px;
            border-top:1px solid #ddd;
            padding-top:10px;
            text-align: center;
            font-size: 10px;
            font-style: italic;
        }

    </style>

</head>

<body>
{{{body}}}
</body>

</html>
